<template>
    <div class="ly-table">
        <slot>
            111111
        </slot>
        <table class="common-table">
            <colgroup>
                <col name="el-table_1_column_1" width="180">
                <col name="el-table_1_column_2" width="180">
                <col name="el-table_1_column_3" width="626">
                <col name="gutter" width="0">
            </colgroup>
            <thead>
                <tr>
                    <th class="el-table_1_column_1">日期</th>
                    <th class="el-table_1_column_2">姓名</th>
                    <th class="el-table_1_column_3">地址</th>
                </tr>
            </thead>
        </table>
        <table class="common-table">
            <colgroup>
                <col name="el-table_1_column_1" width="180">
                <col name="el-table_1_column_2" width="180">
                <col name="el-table_1_column_3" width="626">
                <col name="gutter" width="0">
            </colgroup>
            <tbody>
                <tr :draggable="true" v-for="(item, index) in list" @dragstart="dragstart(item, index)"
                    @dragenter="dragenter(item, index)" @dragend="dragend(item, $event)" @dragover="dragover($event)">
                    <td>{{ item.date }}</td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.address }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import { ref, defineProps } from 'vue';

const props: any = defineProps({
    tableData: {
        type: Array,
        defalut: () => []
    },
});

const list = ref([...props.tableData])

let oldValue: any = null;
let newValue: any = null;
let dragIndexOld: number = -1;
let dragIndexNew: number = -1;

const dragstart = (val: any, idx: any) => {
    oldValue = val;
    dragIndexOld = idx;
}

const dragenter = (val: any, idx: any) => {
    newValue = val;
    dragIndexNew = idx;
}

const dragover = (e: any) => {
    e.preventDefault();
}

const dragend = (value: any, e: any) => {
    if (oldValue !== newValue) {
        let newItems = [...list.value];
        newItems.splice(dragIndexOld, 1);
        newItems.splice(dragIndexNew, 0, oldValue);
        list.value = [...newItems];
    }
    dragIndexOld = -1;
    dragIndexNew = -1;
}

</script>

<style lang="scss">
.dis-flx {
    display: flex;
    justify-content: space-between;
}

.common-table th,
.common-table td {
    text-align: center;
    cursor: pointer;
    background: rgba(19, 64, 135, 0.5) !important;
}
</style>